<template>
  <div class="outer-title pd-bottom--32 pd-top--32">被听评课教师分析</div>
  <div class="df aic font999">
    <p>教学楼：</p>
    <a-select
      v-model:value="queryparam.build"
      placeholder="不限"
      style="width: 224px; marginright: 104px"
    >
      <a-select-option :value="1">1</a-select-option>
      <a-select-option :value="2">2</a-select-option>
    </a-select>
    <p class="ml-16">教室：</p>
    <a-select v-model:value="queryparam.classroom" placeholder="不限" style="width: 224px">
      <a-select-option :value="1">1</a-select-option>
      <a-select-option :value="2">2</a-select-option>
    </a-select>
  </div>
  <radar-chart width="100%" :chartDetailData="allCompaniesDetail"></radar-chart>
  <!-- 均分排名 -->
  <div class="outer-title pd-bottom--32 pd-top--32">均分排名</div>
  <div>
    <p class="draw-title">数据对象：</p>
    <div class="draw-list__outer">
      <p
        class="draw-list__item"
        :class="{ 'draw-list__item--active': item.active }"
        v-for="item in humanList"
        :key="item.id"
        @click="chooseHuman(item)"
        >{{ item.name }}</p
      >
    </div>
  </div>
  <div class="draw-center none-border">
    <p class="draw-title--tab">选择学院：</p>
    <a-select v-model:value="queryparam.classroom" placeholder="选择学院" style="width: 224px">
      <a-select-option :value="1">朝晖校区</a-select-option>
      <a-select-option :value="2">莫干山校区</a-select-option>
      <a-select-option :value="3">屏峰校区</a-select-option>
    </a-select>
  </div>
  <div>
    <p class="draw-title">排序方式：</p>
    <div class="draw-list__outer">
      <p
        class="draw-list__item"
        :class="{ 'draw-list__item--active': item.active }"
        v-for="item in orderList"
        :key="item.id"
        @click="choose(item)"
        >{{ item.name }}</p
      >
    </div>
  </div>
  <div>
    <p class="draw-title">排名范围：</p>
    <div class="draw-list__outer">
      <p
        class="draw-list__item"
        :class="{ 'draw-list__item--active': item.active }"
        v-for="item in rankList"
        :key="item.id"
        @click="chooseRank(item)"
        >{{ item.name }}</p
      >
    </div>
  </div>
  <div class="draw-center none-border">
    <p class="draw-title--tab">数据时间：</p>
    <a-button class="mg-right--12" @click="chooseDay(7)">近7天</a-button>
    <a-button class="mg-right--12" @click="chooseDay(30)">近30天</a-button>
    <a-range-picker v-model:value="valueDate" @change="chooseTime" />
  </div>
  <!-- 图表 -->
  <div class="progress pdt-32 pdb-32">
    <div class="score-layout" v-for="item in scoreList" :key="item.id">
      <p class="score-title">{{ item.name }}</p>
      <div class="score-scale">
        <div
          class="score-scale--progress"
          :style="{ width: (item.score / 100) * 760 + 'px' }"
        ></div>
      </div>
      <p class="mg-left--24">{{ item.score }}</p>
    </div>
  </div>
  <div class="outer-title pd-bottom--32 pd-top--32">教师被听评课分析</div>
  <div>
    <p class="draw-title">选择形式：</p>
    <div class="draw-list__outer">
      <p
        class="draw-list__item"
        :class="{ 'draw-list__item--active': item.active }"
        v-for="item in listenList"
        :key="item.id"
        @click="chooseListen(item)"
        >{{ item.name }}</p
      >
    </div>
  </div>
  <!-- <div class="draw-center none-border">
    <p class="draw-title--tab">选择形式：</p>
    <a-button class="mg-right--12" @click="chooseListen(1)">被听课</a-button>
    <a-button class="mg-right--12" @click="chooseListen(2)">被评课</a-button>
  </div> -->
  <div class="draw-center none-border">
    <p class="draw-title--tab">选择学院：</p>
    <a-select v-model:value="queryparam.classroom" placeholder="选择学院" style="width: 224px">
      <a-select-option :value="1">朝晖校区</a-select-option>
      <a-select-option :value="2">莫干山校区</a-select-option>
      <a-select-option :value="3">屏峰校区</a-select-option>
    </a-select>
  </div>
  <div class="draw-center none-border">
    <p class="draw-title--tab">数据时间：</p>
    <a-button class="mg-right--12" @click="chooseDay(7)">近7天</a-button>
    <a-button class="mg-right--12" @click="chooseDay(30)">近30天</a-button>
    <a-range-picker v-model:value="valueDate" @change="chooseTime" />
  </div>
  <bar-chart width="100%" :chartDetailData="allBarDetail"></bar-chart>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import lineChart from './components/line-tab1.vue'
  import barChart from './components/bar-tab1.vue'
  import radarChart from './components/radar-tab1.vue'
  import { getCourseAssessTime, getCourseAssessTotal } from '@/api/data/index'

  export default defineComponent({
    name: 'Tab1',
    components: {
      lineChart,
      barChart,
      radarChart,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        allCompaniesDetail: [] as any,
        allBarDetail: [] as any,
        queryparam: {
          day: 7,
          classroom: null,
          build: null,
          listen: 1,
        },
        humanList: [
          { id: 0, name: '教师', type: 0, active: true },
          { id: 1, name: '课程', type: 0, active: false },
        ],
        rankList: [
          { id: 0, name: '前5', type: 0, active: true },
          { id: 1, name: '前10', type: 0, active: false },
          { id: 2, name: '前20', type: 0, active: false },
        ],
        orderList: [
          { id: 0, name: '正序', type: 0, active: true },
          { id: 1, name: '倒序', type: 0, active: false },
        ],
        scoreList: [
          { id: 0, name: '教育科学与技术学院', type: 0, score: 87.2 },
          { id: 1, name: '外国语学院', type: 0, score: 59.5 },
        ],
        listenList: [
          { id: 0, name: '被听课', type: 0, active: true },
          { id: 1, name: '被评课', type: 0, active: false },
        ],
      })

      /**
       * @description 加载表格数据
       */
      // 获取折线图/雷达图数据表
      const getLineData = async () => {
        state.allCompaniesDetail = []
        const res = await getCourseAssessTime({})
        state.allCompaniesDetail = res.list
      }
      // 获取饼图数据
      const getPieData = async () => {
        state.allBarDetail = []
        const res = await getCourseAssessTotal({})
        state.allBarDetail = res.list
      }

      // 选择课程状态
      const choose = (item) => {
        state.orderList.map((v) => {
          v.id === item.id ? (v.active = true) : (v.active = false)
        })
      }
      const chooseHuman = (item) => {
        state.humanList.map((v) => {
          v.id === item.id ? (v.active = true) : (v.active = false)
        })
      }
      const chooseRank = (item) => {
        state.rankList.map((v) => {
          v.id === item.id ? (v.active = true) : (v.active = false)
        })
      }
      // chooseHuman
      // 选择天
      const chooseDay = (item) => {
        state.queryparam.day = item
      }
      // 联动日期
      const chooseTime = (ev) => {
        valueDate.value = ev
      }
      const chooseListen = (item) => {
        state.listenList.map((v) => {
          v.id === item.id ? (v.active = true) : (v.active = false)
        })
      }

      onMounted(async () => {
        getLineData()
        getPieData()
      })

      return {
        ...toRefs(state),
        tableRef,
        valueDate,
        choose,
        chooseDay,
        chooseTime,
        chooseListen,
        chooseHuman,
        chooseRank,
      }
    },
  })
</script>
